<template>
<div>
  <nav-header></nav-header>
  <bread-crumb>
    <span>Goods</span>
  </bread-crumb>
  <div class="accessory-result-page accessory-page">
    <div class="container">
      <div class="filter-nav">
        <span class="sortby">排序:</span>
        <a href="javascript:void(0)" class="default cur">默认</a>
        <a href="javascript:void(0)" class="price">价格 <svg class="icon icon-arrow-short">
            <use xlink:href="#icon-arrow-short"></use>
          </svg></a>
        <a href="javascript:void(0)" @click="showPop" class="filterby stopPop">Filter by</a>
      </div>
      <div class="accessory-result">
        <!-- filter -->
        <div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filterBy}">
          <dl class="filter-price">
            <dt>价格:</dt>
            <dd><a href="javascript:void(0)" v-bind:class="{'cur':priceChecked=='all'}" @click="setPriceFilter('all')">All</a></dd>
            <dd v-for="(price,index) in priceFilter" :key="price.key">
              <a href="javascript:void(0)" @click="setPriceFilter(index)" v-bind:class="{'cur':priceChecked==index}">{{price.intervalPrice}}</a>
            </dd>
          </dl>
        </div>

        <!-- search result accessories list -->
        <div class="accessory-list-wrap">
          <div class="accessory-list col-4">
            <ul>
              <li v-for="item in goodsList" :key="item.key">
                <div class="pic">
                  <a href="#"><img v-lazy="'static/'+item.prodcutImg" alt=""></a>
                </div>
                <div class="main">
                  <div class="name">{{item.productName}}</div>
                  <div class="price">{{item.prodcutPrice}}</div>
                  <div class="btn-area">
                    <a href="javascript:;" class="btn btn--m">加入购物车</a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        {{msg}}
        {{css}}
      </div>
    </div>
  </div>
  <nav-footer></nav-footer>
  <div class="md-overlay" v-show="overLayFlag" @click="closePop"></div>
</div>
</template>

<script>
import './../assets/css/base.css'
import './../assets/css/product.css'
import NavHeader from './Header'
import NavFooter from './footer'
import BreadCrumb from './BreadCrumb'
import axios from 'axios'
export default {
  name: "GoodsList",
  data() {
    return {
        msg:'',
        css:'',
      goodsList: [],
      priceFilter: [],
      priceChecked: 'all',
      filterBy: false,
      overLayFlag: false
    };
  },
  mounted: function() {
    this.getGoodsList();
  },
  methods: {
    getGoodsList() {
      axios.get('/goods').then((response) => {
          let res=response.data;
          console.log(res.result.list)
          if(res.status=='0'){
              this.goodsList = res.result.list;
              //this.msg=res.result;
          }
        //var Rres = res.data;
        //console.log(Rres.data);

      })
      axios.get('/priceFilters').then((oPriceFilter) => {
        var Fres = oPriceFilter.data;
        console.log(Fres.result.list);
        this.priceFilter = Fres.result.list;
      })
    },
    showPop() {
      this.filterBy = true;
      this.overLayFlag = true
    },
    closePop() {
      this.filterBy = false;
      this.overLayFlag = false
    },
    setPriceFilter(index) {
      this.priceChecked = index;
      this.closePop()
    }
  },
  components: {
    NavHeader,
    NavFooter,
    BreadCrumb
  }
};
</script>
